<template>
	<div style="width: 500px;height: 100%">
		<a-tabs default-active-key="1" :tab-position="tabPosition" >
			<a-tab-pane key="1" tab="企业微信" forceRender="true">

				<a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
					<a-form-item label="访问域名">
						<a-input placeholder="请输入endpoint"
										 v-decorator="['endpoint', { rules: [{ required: true, message: '请输入endpoint!' }] }]"
						/>
					</a-form-item>
					<a-form-item label="授权ID">
						<a-input placeholder="请输入accessKeyId"
										 v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
						/>
					</a-form-item>
					<a-form-item label="授权秘钥">
						<a-input-password placeholder="请输入AccessKeySecret"
															v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
						/>
					</a-form-item>
					<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
						<a-button type="primary" html-type="submit">
							保存
						</a-button>
					</a-form-item>
				</a-form>

			</a-tab-pane>
			<a-tab-pane key="2" tab="阿里钉钉">
        <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
          <a-form-item label="访问域名">
            <a-input placeholder="请输入endpoint"
                     v-decorator="['endpoint', { rules: [{ required: true, message: '请输入endpoint!' }] }]"
            />
          </a-form-item>
          <a-form-item label="授权ID">
            <a-input placeholder="请输入accessKeyId"
                     v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
            />
          </a-form-item>
          <a-form-item label="授权秘钥">
            <a-input-password placeholder="请输入AccessKeySecret"
                              v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
          </a-form-item>
        </a-form>
			</a-tab-pane>
			<a-tab-pane key="3" tab="阿里OSS">

				<a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
					<a-form-item label="授权ID">
						<a-input placeholder="请输入accessKeyId"
								v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
						/>
					</a-form-item>
					<a-form-item label="授权秘钥">
						<a-input-password placeholder="请输入AccessKeySecret"
								v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
						/>
					</a-form-item>
					<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
						<a-button type="primary" html-type="submit">
							保存
						</a-button>
					</a-form-item>
				</a-form>


			</a-tab-pane>
			<a-tab-pane key="4" tab="阿里短信">
        <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
          <a-form-item label="域名">
            <a-input placeholder="请输入短信API产品域名"
                              v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
            />
          </a-form-item>
          <a-form-item label="授权ID">
            <a-input placeholder="请输入accessKeyId"
                     v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
            />
          </a-form-item>
          <a-form-item label="授权秘钥">
            <a-input-password placeholder="请输入AccessKeySecret"
                              v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
          </a-form-item>
        </a-form>
			</a-tab-pane>
			<a-tab-pane key="6" tab="电子邮箱">

				<a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
					<a-form-item label="服务地址">
						<a-input placeholder="请输入endpoint"
										 v-decorator="['endpoint', { rules: [{ required: true, message: '请输入endpoint!' }] }]"
						/>
					</a-form-item>
					<a-form-item label="邮箱账号">
						<a-input placeholder="请输入accessKeyId"
										 v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
						/>
					</a-form-item>
					<a-form-item label="授权码">
						<a-input-password placeholder="请输入AccessKeySecret"
															v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
						/>
					</a-form-item>

          <a-form-item label="端口号">
            <a-input-password placeholder="请输入AccessKeySecret"
                              v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
            />
          </a-form-item>

          <a-form-item label="编码">
            <a-input-password placeholder="请输入AccessKeySecret"
                              v-decorator="['AccessKeySecret', { rules: [{ required: true, message: '请输入AccessKeySecret!' }] }]"
            />
          </a-form-item>
          <a-form-item label="ssl">
            <a-switch default-checked  />
          </a-form-item>
					<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
						<a-button type="primary" html-type="submit">
							测试连接
						</a-button>
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
					</a-form-item>
				</a-form>

			</a-tab-pane>

      <a-tab-pane key="7" tab="分布式文件">

        <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
          <a-form-item label="地址">
            <a-input placeholder="请输入endpoint"
                     v-decorator="['endpoint', { rules: [{ required: true, message: '请输入endpoint!' }] }]"
            />
          </a-form-item>
          <a-form-item label="账号">
            <a-input placeholder="请输入accessKeyId"
                     v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
            />
          </a-form-item>
          <a-form-item label="密码">
            <a-input placeholder="请输入accessKeyId"
                     v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
          </a-form-item>
        </a-form>

      </a-tab-pane>

      <a-tab-pane key="8" tab="在线编辑">

        <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
          <a-form-item label="地址">
            <a-input placeholder="请输入endpoint"
                     v-decorator="['endpoint', { rules: [{ required: true, message: '请输入endpoint!' }] }]"
            />
          </a-form-item>
          <a-form-item label="appid">
            <a-input placeholder="请输入accessKeyId"
                     v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
            />
          </a-form-item>
          <a-form-item label="appsecret">
            <a-input placeholder="请输入accessKeyId"
                     v-decorator="['AccessKeyId', { rules: [{ required: true, message: '请输入AccessKeyId!' }] }]"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
          </a-form-item>
        </a-form>

      </a-tab-pane>

      <a-tab-pane key="9" tab="单点登录">

        <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" >
          <a-form-item label="服务端地址">
            <a-input placeholder="请输入endpoint"
                     v-decorator="['endpoint', { rules: [{ required: true, message: '请输入endpoint!' }] }]"
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
          </a-form-item>
        </a-form>

      </a-tab-pane>
		</a-tabs>
	</div>
</template>
<script>
import pick from "lodash.pick";

import aliyunOssTab from './aliyunOssTab'
export default {
  components: {aliyunOssTab},
  data() {

    return {
      tabPosition: 'left',
      form: this.$form.createForm(this),
    };
  },
  mounted() {
    this.$post("/system/sysConfiguration/getDetailByUuid", {
      uuid: "2",
    }).then((res) => {
      this.form.resetFields();
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            res,
            ",uuid",
            "type",
            "accessKey",
            "accessSecret",
            "loginAppId",
            "loginAccessKey"
          )
        );
      });
    });
  },
  methods: {
    check() {
      this.form.validateFields((err, values) => {
        if (!err) {
          values.uuid = "2";
          values.type = "dingding";
          values.jsonData = JSON.stringify(values);
          this.$post("/system/sysConfiguration/save", values).then((res) => {
            if (res.statusCode === 200 || res === 1) {
              this.$message.success(
                res.message ? res.message : "操作成功",
                1.5
              );
            } else {
              this.$message.error(res.message, 1.5);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
/deep/ .ant-form-item-control {
  line-height: 1.2 !important;
}
.ant-tabs-left-content>.ant-tabs-tabpane-inactive, .ant-tabs-right-content>.ant-tabs-tabpane-inactive{
	height: 0 !important;
}
</style>
